<template>
  <div class="table-container">
    <ex-list :context="ctx">
      <template #querys>
        <el-form-item label="标题">
          <el-input v-model="data.query.title" />
        </el-form-item>
      </template>

      <template #btns>
        <el-button type="primary" @click="ctx.add()">新增</el-button>
        <el-button
          :disabled="ctx.data.selectedRows.length == 0"
          type="primary"
          @click="ctx.delSelected"
        >
          删除选中项
        </el-button>
      </template>

      <template #columns>
        <el-table-column type="selection" width="50" />
        <el-table-column label="id" prop="id" />
        <el-table-column label="标题" prop="title" sortable />
        <el-table-column label="用户" prop="user.username" />
        <el-table-column label="明细数量" prop="details_count" />
        <!-- <el-table-column label="数量" prop="cnt" sortable /> -->
        <el-table-column width="120">
          <template #default="{ row }">
            <el-button link type="primary" @click="ctx.edit(row)">
              编辑
            </el-button>
            <el-popconfirm
              cancel-button-text="取消"
              confirm-button-text="确定"
              title="确认删除?"
              @confirm="ctx.del(row)"
            >
              <template #reference>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </ex-list>
  </div>
</template>
<script setup>
  import useList from '@/hooks/useList'
  import ExList from '@/components/ExList.vue'
  const ctx = useList({ res: 'test' })
  const { data } = ctx
</script>
